<!doctype html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Services Directory&trade; Departments</title>
<!-- Combined stylesheets load -->
<!-- Load either 960.gs.fluid or 960.gs to toggle between fixed and fluid layout -->
<link href="css/main.css"
	tppabs="http://www.display-inline.fr/demo/constellation/template/css/mini.php?files=reset,common,form,standard,960.gs.fluid,simple-lists,block-lists,planning,table,calendars,wizard,gallery"
	rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-large.png">
<script src="js/index.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jstab.js"></script>

<script type="text/javascript">
	function changeIsActive(elem) {

		var isActive = document.getElementById("active");
		// 		alert(elem.innerHTML + "\n" + "<span class=\"smaller\"><img src=\"images/icons/fugue/flag.png\" width=\"16\" height=\"16\"><strong class=\"tmpAc\">In-active</strong></span>");
		if (elem.value == "active") {
			var confirmActive = confirm("Are you sure to In-active this directorate?");
			if (confirmActive) {
				elem.innerHTML = "<span class='smaller'><img height='16' width='16' src='images/Decisions/disapprove.png' /><strong class='tmpAc'>Active</strong></span>";
				elem.value = "inActive";
				isActive.value = 0;
			}
		} else {
			var confirmDeactive = confirm("Are you sure to active this directorate?");
			if (confirmDeactive) {
				elem.innerHTML = "<span class='smaller'><img height='16' width='16' src='images/Decisions/approve.png' /><strong class='tmpAc'>In-active</strong></span>";
				elem.value = "active";
				isActive.value = 1;
			}
		}
	}
</script>
</head>

<body>
	<%@include file='header.jsp'%>
	<article class="container_12">


		<section class="grid_8">
			<div class="block-border">
				<form class="block-content form" id="complex_form" method="post"
					action="update" name="updateForm">
					<s:iterator value="directorateList" var="item">
						<h1>Add Organisation</h1>

						<div class="block-controls"></div>


						<div class="columns">

							<div id="tabs">

								<ul class="tabs js-tabs same-height">
									<li><a href="#tabs-1">Details 1</a></li>
									<li><a href="#tabs-2">Details 2</a></li>
								</ul>

								<div class="float-right" style="margin: -2.5em 2em 0 0;">

									<a class="button" onclick="ValidateData()"
										style="cursor: pointer"> <span class="smaller"> <img
											height="16" width="16"
											src="images/icons/fugue/tick-circle.png"> <strong>SAVE</strong>
									</span> </a> <a class="button" title="Logout" href="ListOrganisation.jsp">
										<span class="smaller"><img height="16" width="16"
											src="images/icons/fugue/navigation-180.png"><strong>
												BACK </strong> </span> </a>

								</div>

								<div class="tabs-content">

									<div id="tabs-1" style="height: 650px">
											<ul class="message warning no-margin">
												<li id="message">This is a <strong>warning
														message</strong>, inside a box</li>
												<li class="close-bt"></li>
											</ul>
											<!-- content tab 1 -->
											<div style="float: left; width: 48%; overflow: hidden">
												<p class="colx2-left">

													<s:hidden name="directorateVO.directorateID"
														id="directorate.directorateID"
														value="%{#item.directorateID}" />
													<s:hidden name="directorateVO.isActive" id="active" />
												</p>
												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label for="complex-en-url"
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%">BU/Directorate
														Name<font color="red">*</font> </label>
													<s:textfield required="true" type="text"
														name="directorateVO.directorateName"
														value="%{#item.directorateName}" id="directorateName"
														cssClass="full-width" style="width: 52%;" />
												</p>

												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">BU/Directorate
														Short Description</label>
													<s:textarea name="directorateVO.shortDes"
														value="%{#item.shortDes}" style="width: 52%"></s:textarea>
												</p>

												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Lead
														Contact</label>
													<s:textfield name="firstname" required="true"
														style="width: 40%;" id="lu.contactName"
														value="%{#item.contactName}" readonly="true" />
													<a href="javascript: void(0);" style="width: 20%"
														onclick="return popitup('search.action?contact.firstName=&contact.surName=')">Lookup</a>
												</p>
												<input type="checkbox" /> Copy Address from Organisation <br />
												<br />
												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
														Line 1<font color="red">*</font> </label>
													<s:textfield type="text" name="directorateVO.addr1"
														value="%{#item.addr1}" required="true" style="width: 52%;"
														id="lu.address_line1" />
												</p>

												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
														Line 2</label>
													<s:textfield name="directorateVO.addr2"
														value="%{#item.addr2}" required="true" style="width: 52%;"
														id="addressLine2" />
												</p>
												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
														Line 3</label>
													<s:textfield name="directorateVO.addr3"
														value="%{#item.addr3}" required="true" style="width: 52%;"
														id="addressLine3" />
												</p>

												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label for="complex-en-url"
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Postcode<font
														color="red">*</font> </label>
													<s:textfield name="directorateVO.postcode" required="true"
														style="width: 40%;" id="lu.postCode"
														value="%{#item.postcode}" readonly="true" />
													<a href="javascript: void(0);"
														onclick="return popitup('add_lookup.action?address.postCode=&address.addressName=&address.townName=')">Lookup</a>
												</p>

												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Town/Village/City</label>
													<s:textfield name="directorateVO.townName" required="true"
														style="width: 52%;" id="lu.townName"
														value="%{#item.townName}" readonly="true" />
												</p>

												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">County</label>
													<s:textfield name="directorateVO.countyName"
														required="true" style="width: 52%;" id="lu.countyName"
														value="%{#item.countyName}" readonly="true" />
												</p>
												<p class="colx2-left"
													style="width: 100%; margin-bottom: 10px; float: left;">
													<label for="complex-en-url"
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Nation/Country</label>
													<select name="directorateVO.countryName"
														value="%{#item.countryName}" id="lu.countryName"
														class="full-width" style="width: 56%;">
														<option value=""></option>
													</select>
												</p>
											</div>


											<!-- right -->


											<div style="float: right; width: 48%">

												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Type
														of Bussiness<font color="red">*</font> </label>
													<s:textfield name="businessName" style="width: 38%;"
														id="lu.businessName" value="%{#item.typeOfBusinessName}"
														readonly="true" />
													<a href="javascript: void(0);"
														onclick="return popitup('bus_lookup.action?business.businessName=&business.sicCode=')">Lookup</a>
												</p>


												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														SIC Code</label>
													<s:textfield name="sicCode" value="%{#item.sicCode}"
														required="true" style="width: 50%;" id="lu.sicCode"
														readonly="true" />

												</p>

												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														BU/Directorate Full Description</label>
													<s:textarea name="directorateVO.fullDesc"
														value="%{#item.fullDesc}" style="width: 50%;"></s:textarea>
												</p>

												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														Phone Number</label>
													<s:textfield name="directorateVO.phoneNumber"
														cssClass="full-width" value="%{#item.phoneNumber}"
														style="width: 52%;"></s:textfield>
												</p>
												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														Fax</label>
													<s:textfield name="directorateVO.fax" value="%{#item.fax}"
														cssClass="full-width" style="width: 52%;"></s:textfield>
												</p>
												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														Email</label>
													<s:textfield name="directorateVO.email"
														value="%{#item.email}" cssClass="full-width"
														style="width: 52%;"></s:textfield>
												</p>
												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														Web Address</label>
													<s:textfield name="directorateVO.webAddr"
														value="%{#item.webAddr}" cssClass="full-width"
														style="width: 52%;"></s:textfield>
												</p>
												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														Chairity Number</label>
													<s:textfield name="directorateVO.charityNumber"
														value="%{#item.charityNumber}" cssClass="full-width"
														style="width: 52%;"></s:textfield>
												</p>
												<p class="colx2-right"
													style="width: 100%; margin-bottom: 10px;">
													<label for="complex-en-subtitle"
														style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
														Company Number</label>
													<s:textfield name="directorateVO.companyNumber"
														value="%{#item.companyNumber}" cssClass="full-width"
														style="width: 52%;"></s:textfield>
												</p>
												<p class="colx2-right">
													<s:hidden name="directorateVO.contactID" id="lu.contactId"
														value="%{#item.contactID}" />
													<s:hidden name="directorateVO.addressID" id="target5" />
													<s:hidden name="businessID" id="businessID" />
													<s:hidden name="orgID" id="orgID" />
													<s:hidden name="directorateVO.typeOfBusinessID"
														id="lu.typeOfBusinessID" value="%{#item.typeOfBusinessID}" />

												</p>
											</div>
					</s:iterator>
				</form>
			</div>
			<!-- end content tab 1 -->

			</div>
			<div id="tabs-2">
				<div class="block-border"
					style="padding-top: 18px; padding-left: 0px; padding-right: 0px; width: 100%; height: 100%">
					<form class="block-content form" id="table_form" method="post"
						action="">

						<div class="block-controls">
							<div class="float-right">
								<a class="button red" title="Add" href="addDepartment.jsp">
									<span class="smaller">CREATE</span> </a> <input type="checkbox"
									onchange="" name="checkInclude"
									${ checkInclude ? "checked" : "" }
														onclick="" />
								<label for="table-display" style="display: inline">Include
									In-active</label>

							</div>

							<ul class="controls-buttons" style="cursor: pointer">
								<s:hidden type="hidden" id="filter" name="filter" />
								<s:hidden type="hidden" id="checkActive" name="checkActive" />
								<li><a
									onclick="document.getElementById('filter').value = 'all'; document.getElementById('table_form').submit();">
										<strong>ALL</strong> </a></li>
								<li class="sep"></li>
								<li><a
									onclick="document.getElementById('filter').value = '0-9'; document.getElementById('table_form').submit();">
										<strong>0-9</strong> </a></li>
								<li><a
									onclick="document.getElementById('filter').value = 'ABCDE'; document.getElementById('table_form').submit();">
										<strong>A B C D E</strong> </a></li>
								<li><a
									onclick="document.getElementById('filter').value = 'FGHIJ'; document.getElementById('table_form').submit();">
										<strong>F G H I J</strong> </a></li>

								<li><a
									onclick="document.getElementById('filter').value = 'KLMN'; document.getElementById('table_form').submit();">
										<strong>K L M N </strong> </a></li>

								<li><a
									onclick="document.getElementById('filter').value = 'OPQR'; document.getElementById('table_form').submit();">
										<strong>O P Q R </strong> </a></li>

								<li><a
									onclick="document.getElementById('filter').value = 'STUV'; document.getElementById('table_form').submit();">
										<strong>S T U V </strong> </a></li>

								<li><a
									onclick="document.getElementById('filter').value = 'WXYZ'; document.getElementById('table_form').submit();">
										<strong>W X Y Z </strong> </a></li>

							</ul>


						</div>

						<div class="no-margin">
							<div class="no-margin">
								<table class="table" id="tablepaging" cellspacing="0"
									width="100%">
									<thead>
										<tr>

											<th scope="col">Department Name</th>
											<th scope="col">Address Line 1</th>
											<th scope="col">Postcode</th>
											<th scope="col">Contact</th>
											<th scope="col">IsActive?</th>
										</tr>
									</thead>
									<%
										for (int i = 0; i < 15; i++) {
									%>
									<tr id="data <%=i%>">

										<td><a href="ListTeam.jsp"> Department <%=i%></a></td>
										<td>Address <%=i%></td>
										<td>SE <%=i%></td>
										<td>Contact <%=i%></td>
										<td>Yes</td>
									</tr>

									<%
										}
									%>


								</table>
							</div>
						</div>


						<div class="block-footer" id="pageNavPosition">
							<script type="text/javascript">
								var pager = new Pager('tablepaging', 5);
								pager.init();
								pager.showPageNav('pager', 'pageNavPosition');
								pager.showPage(1);
							</script>
						</div>

					</form>

				</div>
			</div>
			

		</section>
		<div class="clear"></div>

	</article>

	<!-- End content -->

	<footer> </footer>

	<script>
		hideTab3();
		/*  	hideTab4();
		 hideTab5();
		 hideTab6();  */

		function focusOn() {
			alert(alskdjf);
		}

		function changeIsActive(elem) {

			var isActive = document.getElementById("active");
			// 		alert(elem.innerHTML + "\n" + "<span class=\"smaller\"><img src=\"images/icons/fugue/flag.png\" width=\"16\" height=\"16\"><strong class=\"tmpAc\">In-active</strong></span>");
			if (elem.value == "active") {
				var confirmActive = confirm("Are you sure to In-active this directorate?");
				if (confirmActive) {
					elem.innerHTML = "<span class='smaller'><img height='16' width='16' src='images/Decisions/disapprove.png' /><strong class='tmpAc'>Active</strong></span>";
					elem.value = "inActive";
					isActive.value = 0;
				}
			} else {
				var confirmDeactive = confirm("Are you sure to active this directorate?");
				if (confirmDeactive) {
					elem.innerHTML = "<span class='smaller'><img height='16' width='16' src='images/Decisions/approve.png' /><strong class='tmpAc'>In-active</strong></span>";
					elem.value = "active";
					isActive.value = 1;
				}
			}
		}

		function ValidateData() {
			var x = document.forms[0]["directorateVO.directorateName"].value;
			var y = document.forms[0]["directorateVO.addr1"].value;
			var z = document.forms[0]["directorateVO.postcode"].value;
			var w = document.forms[0]["businessName"].value;
			var k = true;

			var MyPara = "";
			if (x == null || x == "") {
				MyPara = MyPara
						+ "Directorate name must be filled out<br><br/>  ";
				k = false;
			}
			if (y == null || y == "") {
				MyPara = MyPara
						+ "Address Line 1 must be filled out<br><br/>  ";
				k = false;
			}
			if (z == null || z == "") {
				MyPara = MyPara + "Postcode must be filled out<br><br/>  ";
				k = false;
			}
			if (w == null || w == "") {
				MyPara = MyPara
						+ "Type of business must be filled out<br><br/>  ";
				k = false;
			}
			if (k == false) {
				document.getElementById('message').innerHTML = MyPara;
				var myPara = document.getElementById('message');
				myPara.style.color = "red";
			} else {

				document.forms['updateForm'].submit();
			}

		}
	</script>
</body>
</html>